<template>
  <page-content>
    <space class="my-1">
      <search-form :fields="search"/>
    </space>
    <el-button style="margin-left: 10px" size="small " icon="el-icon-circle-plus-outline"  @click="globalAdd()">添加游戏分组</el-button>
    <el-dialog title="游戏分组" :visible.sync="dialogFormVisible" :close-on-press-escape=false  :close-on-click-modal="false" >
      <el-form :model="form">
        <el-form-item label="游戏分组" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="选择分组：" :label-width="formLabelWidth">
          <el-switch
            v-model="checked"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <template>
              <tree-transfer
            :title="title"
            :from_data="fromData"
            :to_data="toData"
            :default-props="{label:'label'}"
            v-show="checked"
            :mode="mode"
            height="540px"
            filter
            open-all
          ></tree-transfer>

        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="游戏分组" :visible.sync="dialogFormVisible1" :close-on-press-escape=false  :close-on-click-modal="false" >
      <el-form :model="form">
        <el-form-item label="游戏分组" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <template>
              <tree-transfer
          :title="title"
          :from_data="fromData"
          :to_data="toData"
          :default-props="{label:'label'}"
          :mode="mode"
          height="540px"
          filter
          open-all
        ></tree-transfer>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submit1()">确 定</el-button>
      </div>
    </el-dialog>

    <a-table
      row-key="id"
      :data-source="gameGameGroup"
      bordered
      :scroll="{ x: 600 }"
      :pagination="false"
    >
      <a-table-column title="ID" data-index="id" :width="60"/>
      <a-table-column title="字段名" data-index="name"/>
      <a-table-column title="添加时间" data-index="created_at" :width="180"/>
      <a-table-column title="操作" :width="100">
        <template #default="record">
          <space>
            <el-link :underline="false" type="primary" @click="edit1(record.id,record.name)">编辑</el-link>
            <lz-popconfirm :confirm="destroyGameGameGroup(record.id)">
              <el-link :underline="false" type="danger">删除</el-link>
            </lz-popconfirm>
          </space>
        </template>
      </a-table-column>
    </a-table>
    <lz-pagination :page="page"/>
  </page-content>
</template>

<script>
import LzPagination from '@c/LzPagination'
import LzPopconfirm from '@c/LzPopconfirm'
import PageContent from '@c/PageContent'
import SearchForm from '@c/SearchForm'
import Space from '@c/Space'
import treeTransfer from 'el-tree-transfer'
import {
  destroyGameGameGroup,
  getGameGameGroups,

} from '@/api/game/gameGroups'
import { removeWhile } from '@/libs/utils'

export default {
  name: 'Index',
  scroll: true,
  components: {
    LzPopconfirm,
    PageContent,
    LzPagination,
    Space,
    SearchForm,
    treeTransfer,
  },
  data() {
    return {
      mode: 'transfer', // transfer addressList
      title: ['未选游戏分配', '已选游戏分配'],
      fromData: [],
      toData: [],
      search: [
        {
          field: 'id',
          label: 'ID',
        },
        {
          field: 'name',
          label: '字段名',
        },
      ],
      dialogSelect: false,
      gameGameGroup: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      checked: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },

      formLabelWidth: '120px',
      page: null,
    }
  },
  methods: {
    destroyGameGameGroup(id) {
      return async () => {
        await destroyGameGameGroup(id)
        this.gameGameGroup = removeWhile(this.gameGameGroup, (i) => i.id === id)
      }
    },

    edit1(id, name){
      this.form.name = name;
      this.$axios.get('/admin-api/gameEditList?id='+id).then((response)=>{
        this.dialogFormVisible1= true;
        this.fromData = response.data.res
        this.toData= response.data.to
        // console.log(response)


      }).catch((error)=>{
        this.$message.error('请求失败')

      });
    },
    globalAdd(){
      this.toData=[];
      this.form.name= ''
      this.dialogFormVisible = true;
        this.$axios.get('/admin-api/gameList').then((response) => {
            this.fromData = response.data
            this.hand(this.$route);

        }).catch((error) => {
          this.$message.error('请求失败')

        });
    },

    submit1(){

      this.$axios.post('/admin-api/gameGroupEdit', {
        name: this.form.name,
        toData: this.toData,
      })
        .then((response) => {
          if (response.status == 201) {
            this.$message.success(response.data)
            this.dialogFormVisible1 = false
          } else {
            this.$message.error(response.data)
          }
        })
        .catch((error) => {
          this.$message.error('请求失败')
        })
    },

    submit() {

      if (this.checked === true && this.toData.length === 0) {
        this.$message.error('请选择游戏分配')
        return
      }
      this.$axios.post('/admin-api/game/gameGroups', {
        name: this.form.name,
        // combine: s,
        toData: this.toData

      })
        .then((response) => {
          console.log(response)
          if (response.status == 201) {
            this.$message.success('添加成功')
            this.dialogFormVisible = false
            // eslint-disable-next-line no-undef
            // console.log(this.$route)
            // return;
            // eslint-disable-next-line no-undef
            this.hand(this.$route);



          }else if(response.status==202){
            this.$message.error(response.data)
          }else{
            this.$message.error('添加失败')
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch((error) => {
          this.$message.error('请求失败')
        })
    },

    async hand(newVal) {
      const { data: { data, meta } } = await getGameGameGroups(newVal.query)
      this.gameGameGroup = data
      this.page = meta

      this.$scrollResolve()
    },

  },
  watch: {
    $route: {
      async handler(newVal) {
        this.hand(newVal);
      },
      immediate: true,
    },
  },
}
</script>
